<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link href="../../element/index.css" rel="stylesheet" />
		<script src="../../js/vue.js"></script>
		<script src="../../element/index.js"></script>
		<script src="../../js/axios.js"></script>
		<script src="../../js/gsaucommon.js" type="text/javascript" charset="utf-8"></script>
		<title></title>
		<style>
		*{
			margin: 0; 
			padding: 0;
		}
		#app{
			width: 1200px;
			margin: 30px auto;
			box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		}
		.el-header{
			margin-top:10px ;
			height: 300px;
		}
		.name{
			height:50px;
			position: sticky; 
			top: 0px;  
			z-index: 999;
			background-color: white;
			border: 2px solid #F8F8FF;
			margin-top: 0px;
		}
		.title{
			width: 150px;
			height: 40px;
			margin-top:15px;
			text-align: center;
		}
		.add-data{
			width: 150px;
			height: 40px;
			margin-top:8px;
			margin-left: 35px;
		}
		.search{
			width: 230px;
			height: 40px;
			margin-top: 7px;
			font-size:15px;
		}
		.search_span{
			font-size:15px;
			padding-left: 50px;
			margin-top: 15px;
		}
		.status{
			width: 350px;
			margin-top: 7px;
			height: 40px;
			font-size:15px;
		}
		.search-icon{
			width: 50px;
			margin-top: 15px;
			height: 40px;
			font-size:15px;	
		}
		.el-main{
		}
		.main_text{
			width: 1100px;
			margin: 0 auto;
		}
		.el-footer{
			height: 40px;
		}
		.page{
			width: 550px;
			margin: 15px auto;
		}
		</style>
	</head>
	<body>
		<div id="app">
			<el-container>
				<el-header class="name">
					<el-row>
						<el-col :span="21">
							<div class="title"><h3>专利及软著管理</h3></div>
						</el-col>
						<el-col :span="1">
							<div class="add-data"><el-button type="primary" @click="add()">添加</el-button></div>
						</el-col>
					</el-row>

				</el-header>
				<!-- 页眉 -->
				<el-header>
					<el-row>
						<el-col :span="2">
							<div class="search_span">名称：</div>
						</el-col>
						<el-col :span="7">
						 <div class="search">
							  <el-input v-model="search_message"  placeholder="请输入关键词">  </el-input>
						 </div>
						</el-col>
						<el-col :span="11">
							<div class="status">
								<span>流程状态：</span>
								<el-select v-model="status_message" clearable placeholder="请选择" >
									 <el-option label="全部" value="全部"></el-option>
									 <el-option v-for="(item,index) in status_options" :label="item.name" :value="item.name"></el-option>
								</el-select>
							</div>
						</el-col>
						<el-col :span="3">
							<div class="search-icon"><el-button  type="primary" size="small" icon="el-icon-search" @click="search(currentPage,search_message,status_message)">搜索</el-button></div>
						</el-col>
					</el-row>
				</el-header>
				<!-- 正文 -->
				<el-main>
					<el-row>
						<el-col :span="24">
							<div class="main_text">
								<template>
								  <el-table :data="tableData" stripe border style="width: 100%" highlight-urrent-row >
									<el-table-column fixed  type="index" :index="indexMethod" label="序号"  width="70"></el-table-column>
								    <el-table-column prop="name" label="专利或软件著作权名称" width="380"></el-table-column>
								    <el-table-column prop="createTime" label="提交时间" width="200"></el-table-column>
									<el-table-column prop="status" label="流程状态" width="120"></el-table-column>
								    <el-table-column fixed="right" label="操作" width="250" >
								      <template slot-scope="scope">
										<el-button type="primary" size="mini" @click="check(scope.row)"> 查看</el-button>
										<el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
								        <el-button v-if="scope.row.node ==show?false:true"  @click="handleClick(scope.row)" type="primary" size="mini">修改</el-button>
								      </template>
								    </el-table-column>
								  </el-table>
								</template>
							</div>
						</el-col>
					</el-row>
				</el-main>
				<!-- 页尾 -->
				<el-footer>
					<el-row>
						<el-col :span="24">
							  <div class="page">
							    <el-pagination  @current-change="handleCurrentChange"  :page-sizes="[page_sizes]"  layout="total, sizes, prev, pager, next, jumper" :total="dataLength"></el-pagination>
							  </div>
						</el-col>
					</el-row>
				</el-footer>
			</el-container>
		</div>
	</body>
</html>
<script>
	//3:由Vue挂载elements
	new Vue({
		el:"#app",
		data:{
			search_message:"",
			status_message:"",
			page_sizes:5,
			currentPage:1,
			dataLength:0,
			tableData: [1],
			editIndex:-1,
			status_options:[],
			rules:{
				pageIndex:1,
				pageSize:5,
				tianbaoId:8,
				name:"",
				status:""
			},
			show:"审核已通过"
		},
		methods: {
			add(){
				window.location.href="addZhuanLiJiRuanZhu.html"
			},
			indexMethod(index) {
			        return (this.page_sizes*(this.currentPage-1))+index+1 ;
					// return index+1
			},
			findAll(){
				this.rules.pageIndex=this.currentPage;
				console.log(this.rules.pageIndex)
				axios.post(window.gsau+"zhuanlizhuanzhu/findallbystatus",this.rules).then((res)=>{
						this.tableData=res.data.data.records
						this.dataLength=res.data.data.total	
				})
			},
			findByStatus(){
				axios(window.gsau+"status/findall").then((res)=>{
					this.status_options=res.data.data
				})
			},
			handleClick(row){
				this.id = row.id
				localStorage.setItem("id", this.id)
				window.location.href ="editZhuanliJiZhuanzhu.html"
			},
			handleCurrentChange(val){
				this.currentPage=val
				this.findAll()
			
			},
			handleDelete(row){
				this.$confirm("确认删除该条数据吗？", "提示").then(()=>{
					this.editIndex=row.id
					axios.delete(window.gsau+"zhuanlizhuanzhu/delete/"+this.editIndex).then((res)=>{
						if(res.data.code==20010){
							this.$message.success({message:"删除成功",showClose:true})
							this.findAll()
						}else{
							console.log(res)
							this.$message.error({message:"删除失败，请重试",showClose:true})
						}
					})
				}).catch(()=>{
					this.$message.success({message:"取消删除操作",showClose:true})
				})
			},
			check(row){
				this.id = row.id
				localStorage.setItem("id", this.id)
				window.location.href = "chakanZhuanliJiZhuanzhu.html"
			},
			search(currentPage,search_message,status_message){
				this.rules.pageIndex=this.currentPage;
				this.rules.name=this.search_message;
				if(status_message=="全部"){
					this.rules.status=""
				}else{
					this.rules.status=this.status_message;
				}
				axios.post(window.gsau+"zhuanlizhuanzhu/findallbystatus",this.rules).then((res)=>{
						this.tableData=res.data.data.records
						this.dataLength=res.data.data.length
						this.findAll()
			})},	
		},
		created:function(){
			this.findAll()
		},
	})
</script>
